<template>
  <div class="popup">
    <el-dialog v-model="isVisible" :width="Width" :align-center="true" :show-close="false"
      :close-on-click-modal="false">
      <div class="my-header">
        <div class="flex">
          <pb-icon v-if="showTitleIcon" :name="curTitleIcon.name" :color="variables[curTitleIcon.color]" size="20"
            class="mr-2">
          </pb-icon>
          <div>{{ title }}</div>
        </div>

        <pb-icon name="close" color="#000" size="14" class="icon" @click="closeBox"></pb-icon>
      </div>
      <div class="solid"></div>

      <div class="content-box">
        <div class="center">
          <div class="flex">
            <pb-icon v-if="showIcon" :name="curIcon.name" :color="variables[curIcon.color]" size="20" class="mr-2">
            </pb-icon>
            <div class="text">
              {{ content }}
              <slot>
              </slot>
            </div>
          </div>
          <div class="connectList">
            <div v-for="item in connectList">
              {{ item }}
            </div>
          </div>

        </div>
        <div class="dialog-footer">
          <pb-button size="super-small" :secondary="true" @click="onCancelClick" class="mr-2">{{ cancelText
            }}</pb-button>
          <pb-button size="super-small" @click="onConfirmClick" v-if="showConfirm">{{ confirmText }}</pb-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import { computed, onMounted, ref } from "vue"
import variables from "@/styles/variables.module.scss";

import { PayLoadType, HuiMsgBoxProp } from "./types";


const iconList = reactive(
  [
    { type: 'info', name: 'information-solid', color: 'warning-color' },
    { type: 'qustion', name: 'qustion', color: 'warning-color' },
    { type: 'success', name: 'success', color: 'success-color' },
    { type: 'warning', name: 'warning', color: 'warning-color' },
    { type: 'error', name: 'error', color: 'danger-color' },
    { type: 'loading', name: 'loading', color: 'primary-color' },
  ]
)
const curTitleIcon = computed(() => {
  const curItem = iconList.findIndex(el => el.type == props.titleType)
  return iconList[curItem]
})
const curIcon = computed(() => {
  const curItem = iconList.findIndex(el => el.type == props.type)
  return iconList[curItem]
})

const props = withDefaults(defineProps<HuiMsgBoxProp>(), {
  type: 'info',
  cancelText: '取消',
  confirmText: '保存',
  Width: 240,
  title: '温馨提示',
  connectList: [],
  showIcon: true,
  showTitleIcon: false,
  titleType: 'error',
  showConfirm: true
})


// // 控制显示处理
const isVisible = ref(false)
/**
 * 组件展示
 */
const show = () => {
  isVisible.value = true
}

/**
 * 取消事件
 */
const onCancelClick = () => {
  console.log(123);

  props.cancelHandler()
  close()
}

/**
 * 确定事件
 */
const onConfirmClick = () => {
  props.confirmHandler()
  close()
}

// 关闭动画处理时间
const duration = '0.5s'
/**
 * 关闭事件,保留动画执行时长
 */
const close = () => {
  isVisible.value = false
  // 延迟一段时间进行关闭
  setTimeout(() => {
    props.closeBox()
  }, parseInt(duration.replace('0.', '').replace('s', '')) * 100)
}

/**
 * 处理动画 (render 函数的渲染，会直接进行)
 */
onMounted(() => {
  isVisible.value = true
})

</script>

<style lang="scss">
.popup {
  .el-dialog {
    padding: 0
  }
}
</style>
<style lang="scss" scoped>
.popup {
  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: -8px 16px 5px 16px;

  }

  .content-box {
    padding: 16px;
  }

  .solid {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
    ;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }

  .connectList {
    color: #f64351
  }


  .text {
    margin-right: 3px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }

  .icon {
    cursor: pointer;
  }

  .Leftbt {
    margin-right: 8px;
  }
}
</style>